<template>
    <div>
        <nav>
            <a href="#/" class="fa fa-angle-left"></a> 商品详情
        </nav>
        <div class="conn">
            <div class="top">
                <img :src="`http://localhost:2222/images/photos/${shop.productImage}`" alt="">
            </div>
            <div class="conent">
                <h3>{{shop.name}}</h3>
                <p><span>¥{{shop.price}}</span>{{shop.describe}}</p>
                <div class="fen"></div>
                <div class="juan">
                    <p class="p1">领劵<span>满299减30元</span><i class="fa fa-angle-right"></i></p>
                    <p class="p2">促销 <span class="cu">以下促销,可在购物车任选其一</span>
                        <span class="zhe"><span>折扣</span>指定商品满3件九折 <i class="fa fa-angle-double-right"></i></span>
                    </p>
                    <div class="div1">
                        <span>
                        <img src="//st01.fn-mart.com/mstatics/assets/images/v2/detail/goods/icon_duion_2x.png?v=1508980212450" alt="">
                        <span>飞牛发货&售后</span>
                        </span>
                        <span>
                        <img src="//st01.fn-mart.com/mstatics/assets/images/v2/detail/goods/icon_duion_2x.png?v=1508980212450" alt="">
                        <span>支持七天无理由退换</span>
                        </span>
                        <span>
                        <img src="//st01.fn-mart.com/mstatics/assets/images/v2/detail/goods/icon_duion_2x.png?v=1508980212450" alt="">
                        <span>正品保证</span>
                        </span>
                        <span>
                        <img src="//st01.fn-mart.com/mstatics/assets/images/v2/detail/goods/icon_duion_2x.png?v=1508980212450" alt="">
                        <span>货到付款</span>
                        </span>
                    </div>
                </div>
                <div class="fen"></div>
                <div class="ping">
                    <p>商品评价( {{shop.comment.length}} ) <span>好评 <span>97%</span><i class="fa fa-angle-right"></i></span>
                    </p>
                    <div>
                        <a :href="`#pinglun/${shop._id}`">查看更多评论</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer">
            <ul>
                <li>
                    <img src="../assets/00.png" alt="">
                    <span>收藏</span>
                </li>
                <li>
                    <img slot="icon" src="../assets/000.png">
                    <span>客服</span>
                </li>
                <li class="li"  @click="addcar" style="background:#FF4040">
                    <span style="color:#fff">加入购物车</span>
                </li>
                <li class="li" style="background:#CD3333">
                   <!--<a :href="`#/dizhi/${shop._id}`"> <span style="color:#fff">立即购买</span></a>-->
                   <a @click.prevent="sure"><span style="color:#fff">立即购买</span></a>
                </li>
            </ul>

        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import { Group, Cell, Swiper, SwiperItem, Tabbar, TabbarItem } from 'vux'
    export default {
        components: {
            Group,
            Cell,
            Swiper,
            SwiperItem,
            Tabbar,
            TabbarItem
        },
        data: function () {
            return {
                shop: ''
            }
        },
        mounted: function () {
            var that = this;
            // console.log(this.$route.path)
            let id = this.$route.path.slice(7);
            // console.log(id);
            axios.get(`los/xiang/${id}`).then(function (data) {
                // console.log(data);
                that.shop = data.data.message;

            }).catch(function (err) {
                console.log('获取失败')
            })
        },
        methods: {
            addcar:function(ev){
                // console.log(this.$route.path);
                let ha = this.$route.path.slice(7);
                axios.post('los/addcart',{shop_id:ha}).then(function(result){
                    // console.log(result);
                    alert('已经添加至购物车')
                }).catch(function(err){
                    console.log(err);
                })

            },
            sure:function(){
                // ev.preventDefault();
                let arr = [];
                // this.datas.forEach((data) =>{
                //     if(data.xuan == true){
                        arr.push(this.shop);
                    // }else{
                        console.log(arr);
                    // }
                // });
                axios.post('los/sure',{arr:arr}).then((resData) =>{
                console.log(resData.data.message);
                    if(resData.data.message.length == 0){
                        alert('没有选购商品~~~');
                    }else{
                    location.href = '/#/goumai';
                    }
                }).catch((err) =>{
                    console.log(err);
                })
            }
        }

    }

</script>

<style scoped>
    .footer ul{
        list-style: none;
        overflow: hidden;
    }
    .footer ul li {
        float: left;
        width: 25%;
        text-align: center;
        font-size: 14px;
    }
    .footer ul li.li {
        line-height: 45px;
    }
    .footer ul li img{
        display: block;
        width: 22px;
        margin: 0px auto;
        margin-bottom: 0;
    }
    .footer ul li img span{
        margin-bottom: 5px;
    }

    .footer {
        border-top: 1px solid #ccc;
        background: #fff;
        height: 45px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .ping>p {
        line-height: 45px;
        border-bottom: 1px solid #ccc;
        color: #666;
        font-size: 14px;
        padding: 0 15px;
        overflow: hidden;
    }

    .ping>div {
        text-align: center;
        padding: 20px;
    }

    .ping>div>a {
        color: #333;
        border: 1px solid #666;
        padding: 5px 10px;
        border-radius: 4px;
        margin: 10px 0;
    }

    .ping>p>span {
        float: right;
    }

    .ping>p>span>span {
        color: #d7063b;
    }

    .ping>p>span>i {
        font-size: 26px;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }

    .div1 {
        background: #eee;
        overflow: hidden;
        padding-top: 10px;
    }

    .div1>span {
        display: block;
        line-height: 30px;
        padding-left: 15px;
        float: left;
        font-size: 14px;
    }

    .div1>span>img {
        width: 18px;
    }

    .div1>span>span {
        position: relative;
        bottom: 3px;
    }

    .cu {
        position: relative;
        left: 10px;
        font-size: 12px;
        top: 5px;
    }

    .zhe {
        display: block;
        margin-top: 25px;
        margin-left: 40px;
        position: relative;
    }

    .zhe i {
        position: absolute;
        font-size: 20px;
        right: 15px;
    }

    .zhe>span {
        border: 1px solid #d7063b;
        border-radius: 4px;
        color: #d7063b;
        padding: 0 3px;
        margin-right: 5px;
    }

    .p1 {
        position: relative;
    }

    .p1 span {
        color: #d7063b;
        border-top: 1px solid #d7063b;
        border-left: 1px dashed #d7063b;
        border-right: 1px dashed #d7063b;
        padding: 0 5px;
        margin: 0 10px;
    }

    .p1>i {
        font-size: 22px;
        position: absolute;
        right: 15px;
    }

    .juan>p {
        margin-left: 15px;
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        font-size: 14px;
        color: #666;
    }

    .fen {
        padding: 5px;
        background-color: #dedede;
    }

    .conent {
        color: #333;
    }

    .conent>h3 {
        font-weight: 500;
        padding-left: 15px;
        margin-bottom: 5px;
        font-size: 18px;
    }

    .conent>p {
        font-size: 14px;
        padding-left: 15px;
    }

    .conent>p>span {
        margin-right: 15px;
        color: #d7063b;
        font-size: 16px;
    }

    .top {
        height: 375px;
        border: 1px solid #eee;
    }

    .top img {
        width: 80%;
        margin: 40px auto;
        display: block;
    }

    nav {
        line-height: 45px;
        text-align: center;
        border-bottom: 1px solid #ddd;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #FA8072;
        color: #fff;
    }

    nav>a {
        position: absolute;
        left: 20px;
        font-size: 30px;
        top: 6px;
        color: #fff;
    }

    .conn {
        margin-top: 46px;
        margin-bottom: 55px;
    }
</style>